嗨咿，我是illumi，昨天講到用lottiefiles的既有動畫放到網頁上，今天來說說怎麼把各位動畫大師的大作，壓縮到最小放到網頁上！

步驟流程

Step1. 下載 After Effects

• 需要訂閱 Adobe Creative Cloud。
• 開啟 AE 準備製作動畫。

Step2. 下載 Bodymovin 外掛

• Bodymovin 是 Lottie 的 AE 匯出插件。

方式一（官方推薦）

• 透過 aеscripts + aeplugins 下載 。

方式二

• 在 Adobe Creative Cloud 中安裝適用於 CC 2014 及以上版本的。

方式三：在 GitHub 倉庫下載 ZIP → 解壓 → 取得 /build/extension 裡的 .zxp → 使用 ZXP 安装器。

方式四（手動安裝）：

• 將解壓後的 bodymovin.zxp 放入 Adobe 的 CEP extensions 資料夾中（Windows 或 Mac 路徑不同）。
• 編輯註冊表或 .plist 加入 PlayerDebugMode=1，以啟用插件。

方式五：使用 Adobe 官方第三方插件手動安裝流程參考說明。

方式六：使用 Homebrew-adobe 安裝（macOS）：打開終端機輸入下方指令

brew tap danielbayley/adobe
brew cask install lottie

安裝後注意事項：

• Windows：請到 Edit > Preferences > Scripting & Expressions… 打勾「Allow Scripts to Write Files and Access Network」。
• Mac：在 Adobe After Effects > Preferences 裡做相同設定。

Step3. 在 AE 中開啟 Bodymovin

• 進入 Window > Extensions > Bodymovin。
  
• 這時會出現一個新的面板，專門用來輸出 Lottie。

Step4. 製作動畫（注意限制！）

如果是沒學過AE的資深工程師們想要體驗，可以像我下面一樣（動畫師們請跳過）：

• 新建Comp（有圓形方形的類似底片的按鈕）

1. 點擊上方工具列圓形或方形的按鈕
2. 在畫布中拖拉
3. 點擊秒錶圖案
4. 下方時間軸的不同時間點，並把你拖拉出來的圖形移動位置

在 AE 裡做一個動畫，常見的安全素材有：

✅ 可以用的：

• Shape Layer（向量圖層）
• Solid + Mask
• Text Layer（文字圖層）

❌ 不要用的：

• 3D Layer、Camera
• 大部分的特效（例如 Glow, Blur, Drop Shadow）

• 複雜的 Expression（部分不支援）
• PNG / 影片檔（Bodymovin 不支援）

Step5. 輸出成 JSON 檔

• 在 Bodymovin 面板裡 → 點選Selected下方圓圈使他變成綠色（很容易忽略他） → 設定輸出路徑(橫排最右邊的三個綠點） → 點 Render。
• 
• 你會得到一個 .json 檔，這就是 Lottie 動畫！

6️⃣ 放到網頁上

在 網頁裡使用 Lottie：

Web 使用安裝方式：

• npm 安裝：

  npm install lottie-web
  
  

GitHub+1

• Bower 安裝：

  bower install bodymovin
  
  

• CDN 使用：可透過 jsDelivr 或 CDNJS 引入 lottie.js。

簡易範例：

<script src="js/lottie.js" type="text/javascript"></script>
<script>
  lottie.loadAnimation({
    container: document.getElementById('lottie'), // 指定容器
    renderer: 'svg',
    loop: true,
    autoplay: true,
    path: 'animation.json' // Lottie JSON 路徑
  });
</script>

⚠️ 預告：那 PNG 或透明影片怎麼辦？

前面提到 Bodymovin 不支援 PNG 與影片檔，所以如果你要做的是「透明的動態素材」，例如煙霧、火焰、實拍人物，就不能直接輸出成 Lottie。

那該怎麼辦呢？

答案就是 輸出透明影片（WebM ） 再放到網頁上！這會是下一篇的重點。